:root {

  --header-height: 70px;

  --section-title-bg: #D64000;

  --sub-section-padding: 15px 22px 8px 22px;

  --field-padding: 10px 18px;

  --main-radius: 20px;

  --error-red: #e74c3c;

  --gray-bg: #f0f0f0;

  --disabled-gray: #ddd;

  --form-side-padding: 20px;

}

/* Universal box-sizing */

*, *::before, *::after {

  box-sizing: border-box;

}

html, body {

  margin: 0;

  padding: 0;

  height: 100%;

  min-height: 100vh;

  overflow-x: hidden;

  max-width: 100vw;

}

body {

  font-family: Clario, Arial, sans-serif;

  min-height: 100vh;

  background: #ffffff; /* white background instead of gradient */
 
}

/* Header */

.header {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
  border-bottom: 1px solid #737373;
  box-sizing: border-box;
}
.footer {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
  border-top: 1px solid #404040;
  box-sizing: border-box;
  background: #1f1f1f;
}
.logo {
  height: 55px;
  max-width: 100%;
  width: auto;          /* Default width */
  display: block;
  margin: 0;
  align-self: center;
  object-fit: contain;   /* Ensure proper scaling */
}

/* Unified gradient panel for banner and form */

.main-container {

  max-width: 900px;

  margin: 30px auto 30px auto;

  padding-left: 0px;

  padding-right: 0px;

  //border-radius: var(--main-radius);

  //box-shadow: 0 2px 18px 0 rgba(60,45,90,0.13);

  background: rgba(255,255,255,0.98);
//-webkit-backdrop-filter: blur(3px);
  //backdrop-filter: blur(3px);


  overflow: hidden;

  display: flex;

  flex-direction: column;

  align-items: stretch;

  overflow-x: hidden;

}

/* Banner inside main panel */

.banner-panel {
  position: relative;
  width: 100vw;                  /* full viewport width */
  max-height: 360px;             /* max height for desktop */
  height: 35vh;                  /* responsive height relative to viewport */
  min-height: 22.5rem;             /* minimum height for small screens */
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('https://images.productnotice.thomsonreuters.com/EloquaImages/clients/TEMAILS/%7B20bc9edb-bec4-4728-82c6-3f009e69f6ed%7D_Imagem1.jpg'); /* Replace with your image path */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;        /* cover to keep aspect ratio and fill */
  overflow: hidden;
  box-sizing: border-box;
  z-index: 1;
}

.banner-text {
  position: relative;
  z-index: 2;                  /* above background */
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
  text-align: center;
  padding: 20px 5vw;
  //background: rgba(30, 30, 50, 0.5); /* semi-transparent dark overlay background */
  border-radius: 10px;
  width: 100%;
  max-width: 900px;
  //box-shadow: 0 1px 10px 0 rgba(0,0,0,0.10);
  word-break: break-word;
  overflow-wrap: break-word;
  outline: none;
-webkit-user-select: none;
  user-select: none;
}

form {

  width: 100%;

  margin: 0;

  padding: 30px var(--form-side-padding) 28px var(--form-side-padding);

  box-sizing: border-box;

  background: transparent;

  overflow-x: hidden;

}

.form-section {

  margin-bottom: 40px;

  /*background: rgba(203,228,253,0.17);*/

  border-radius: 12px;

  /*padding-bottom: 14px;*/

}

/* Enhanced Section Titles */

.form-section h2 {

  //font-weight: 900;

  background: var(--section-title-bg);

  margin: 0 0 20px 0; /* Added bottom margin for spacing */

  padding: 15px 0 15px 20px;

  border-left: 6px solid #D64000;

  font-size: 18px;

  letter-spacing: 0.05em;

  color: #f9f9f9;

  //text-shadow: 0 1px 0 #fff8;

  //border-radius: 12px 12px 0 0;

  //box-shadow: 0 1px 8px 0 rgba(58,81,121,0.08);

}

.sub-section-title {

  font-weight: bold;

  margin: 22px 0 22px 0; /* Added top and bottom margin for spacing */

  padding: 12px 22px 12px 20px;

  color: #2b3856;

  font-size: 14px;

  letter-spacing: 0.03em;

  border-left: 4px solid #D64000;
//box-shadow: 0 0px 5px 0 rgba(58, 81, 121, 0.08);
  //background: #f6f8fc80;

  //border-radius: 6px;

}

.form-row {

  display: flex;

  flex-wrap: nowrap;

  gap: 28px;

  margin-bottom: 15px;

  padding-left: 25px;

  padding-right: 25px;

  overflow-x: hidden;

}

.form-row-no-overflow {

  display: flex;

  flex-wrap: nowrap;

  gap: 28px;

  margin-bottom: 15px;

  padding-left: 25px;

  padding-right: 25px;

  overflow-x: visible;

}

.form-group {

  flex: 1 1 240px;

  min-width: 0;

  display: flex;

  flex-direction: column;

  padding-left: 6px;

  padding-right: 6px;

  margin-bottom: 8px;

  box-sizing: border-box;

}

label {

  margin-bottom: 12px;

  font-size: .875rem;

  padding-left: 2px;
  color: #404040;
}



input, textarea, select {

  padding: 13px 23px;

  border: 1.2px solid #b1bed5;

  border-radius: 5px;
font-family: Clario, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #404040;

  //background: #fbfbfb;

  transition: border-color 0.19s, background 0.18s;

  margin-bottom: 0;

  word-break: break-word;

  overflow-wrap: break-word;
  //min-height: 3rem;
}
input:focus,
select:focus,
textarea:focus {
  outline: none;                   /* Remove default blue outline */
  border-color: #666;           /* Replace with your desired focus border color */
  //box-shadow: 0 0 0 2px rgba(214, 64, 0, 0.3); /* subtle colored glow */
  border-width: 1px;             /* Or your preferred border thickness */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}


.select-wrapper{
position: relative;
display: inline-block;
width: 100%;
}
.select-wrapper select{
width: 100%;
padding-right: 38px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
//background: #fbfbfb;
}
.select-arrow-separator{
position: absolute;
top: 50%;
right: 40px;
transform: translateY(-50%);
width: 1px;
height: 35px;
background: #d2d0d052;
z-index: 4;
pointer-events: none;
}
.select-arrow{
position: absolute;

top: 50%;
right: 15px;
width: 15px;
height: 15px;
transform: translateY(-50%);
pointer-events: none;
display: inline-block;
}
.select-arrow::before{
content: "";
border-bottom: 2px solid #000;
border-right: 2px solid #000;
display: block;
width: 8px;
height: 8px;
margin: auto;
transform: rotate(45deg);
}

textarea {min-height: 44px; resize: vertical;}

select:disabled, .gray-bg {

  background: var(--gray-bg) !important;

  color: #888;

  border-color: var(--disabled-gray) !important;

  cursor: not-allowed;

}

//.valid {border-color: #26bb66 !important;}

.error {border-color: #c20000 !important;}

.error-msg {

  color: #c20000;

  font-size: 12px;

  margin-top: 8px;

  padding-left: 2px;

display: none;
}

.error-msg.show{

display: block;
}
 .multi-select-display.error{border: 1px solid #c20000;}
button[type="submit"] {

  background: #d64000;

  color: #fff;

  border: none;

  padding: 12px 35px;

  font-size: 16px;

  border-radius: 8px;

  margin-top: 18px;

  margin-left: var(--form-side-padding);

  margin-bottom: 4px;

  cursor: pointer;

  letter-spacing: 0.02em;

  font-weight: 700;

  box-shadow: 0 2px 10px 0 rgba(130,130,220,0.08);

  transition: background 0.22s;

}



#success-alert{

position: fixed;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

background: #daf5dc;

color: #1e4620;

border: 2px solid #28a745;

font-size: 16px;

padding: 30px 40px;

border-radius: 12px;

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);

z-index: 9999;

text-align: center;

display: none;

}
 
#success-alert.show{

display: flex;

flex-direction: column;

align-items: center;

animation: fadeIn 0.5s ease-in-out forwards;

}
 
/* Message text */

#success-alert .message {

margin-top: 12px;

font-size: 16px;

color: #1e4620;

font-weight: 600;

}
 
/* Checkmark SVG animation */

.checkmark-svg{

width: 80px;

height: 80px;

display: block;

stroke: #28a745;

stroke-width: 5;

background: none;

}
 
.checkmark-circle {

fill: none;

stroke-linecap: round;

stroke-dasharray: 188.4;

stroke-dashoffset: 188.4;

animation: draw-circle 0.8s cubic-bezier(.77,0,.18,1) forwards;

}
 
.checkmark-check {

fill: none;

stroke: #28a745;

stroke-width: 5;

stroke-linecap: round;

stroke-linejoin: round;

stroke-dasharray: 50;

stroke-dashoffset: 50;

animation: draw-check 0.4s 0.8s cubic-bezier(.77,0,.18,1) forwards;

}
 
/* stroke animations */

@keyframes draw-circle{

to{

stroke-dashoffset: 0;

}

}
 
@keyframes draw-check{

to{

stroke-dashoffset: 0;

}

}
 
#success-overlay{

display:none;

position: fixed;

z-index: 9998;

top:0;

left:0;

width: 100vw;

height: 100vh;

background: rgba(180, 180, 180, 0.35);

opacity: 0;

transition: opacity 0.4s ease;

}
 
#success-overlay.show{

display:block;

opacity: 1;

pointer-events: auto;

}

.red{color: #c20000;}
 
.multi-select-container {

      position: relative;
width: 100%;
font-family: Clario, Arial, sans-serif;
color: #404040;
-webkit-user-select: none;
user-select: none;

    }

    .multi-select-display {
	display: flex;
align-items: center;
position: relative;
padding: 13px 13px 13px 23px;
line-height: 1.5;
//background: #fbfbfb;
      border: 1px solid #ccc;
      border-radius: 6px;
cursor: pointer;
box-sizing: border-box;
//min-height: 38px;
    }
.multi-select-display:focus{
outline: none;                   /* Remove default blue outline */
  border-color: #666;           /* Replace with your desired focus border color */
   border-width: 1px;             /* Or your preferred border thickness */
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
//.multi-select-display.selected {
//border: 1px solid #26bb66;
//transition: border-color 0.3s ease, box-shadow 0.3s ease;
//}
.multi-select-text{
flex: 1;
padding-left: 2px;
whire-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
color: #404040;
}
.multi-select-separator{
position: absolute;
top: 50%;
right: 40px;
transform: translateY(-50%);
width: 1px;
height: 35px;
background: #d2d0d052;
z-index: 4;
pointer-events: none;
}

    .arrow-icon {
    position: absolute;
top: 50%;
right: 15px;
width: 15px;
height:15px;
  z-index: 2;
      pointer-events: none;
display: inline-block;
transform: translateY(-50%);
    }
.arrow-icon.down::before{
content: "";
border-bottom: 2px solid #000;
border-right: 2px solid #000;
display: block;
width: 8px;
height: 8px;
margin: auto;
transform: rotate(45deg);
}
.arrow-icon.up::before{
content: "";
border-top: 2px solid #000;
border-left: 2px solid #000;
display: block;
width: 8px;
height: 8px;
margin: auto;
transform: rotate(45deg);
}

    .multi-select-options {

      position: absolute;

      top: 100%;

      left: 0;

      width: 100%;

      z-index: 100;

      background: #fff;

      border: 1.5px solid #ccc;

      border-radius: 6px;
      box-sizing: border-box;

      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

      padding: 6px 0;

      max-height: 250px;

      overflow-y: auto;
margin-top: 0px;

    }

    .multi-select-options input[type="text"] {

      width: 100%;

      padding: 6px 10px;

      margin-bottom: 10px;

      border-radius: 4px;

      border: 1px solid #ccc;

    }

    .multi-select-options label {
margin-bottom: 0px !important;
      display: block;
-webkit-user-select: none;
user-select: none;
    padding: 4px 14px;
//border-radius: 4px;
//transition: background-color 0.18s ease;
    }
.multi-select-options label.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.multi-select-options label:hover{
background: #5c5b5b;
color: #FFFFFF;
cursor: pointer;
}

    .multi-select-options input[type="checkbox"]:disabled + span {

      color: #999;

    }

    .multi-select-footer {

      display: flex;

      justify-content: flex-end;

      margin-top: 10px;

    }

    .clear-btn {

      font-size: 13px;

      color: #555;

      background: none;

      border: none;

      text-decoration: underline;

      cursor: pointer;

      padding: 6px 8px;

    }

    .clear-btn:hover {

      color: #d35400;

    }

    .count-text {

      font-weight: normal;

      font-size: 14px;

      color: #555;

    }

    .count-green {

      color: #27ae60;

      font-weight: bold;

    }

    .count-red {

      color: #e74c3c;

      font-weight: bold;

    }

    .count-default {

      color: #555;

      font-weight: normal;

    }

    .hidden {

      display: none !important;

    }
 
.radio-group-row{

display: flex;

flex-direction: column;

gap: 5px;

margin-top: 8px;

}

.radio-group-row label{

display: flex;

flex-direction: row;

align-items: flex-start;

font-size: 14px;

line-height: 1.45;

}

.radio-group-row input[type="radio"]{

margin-right: 8px;

margin-top: 3px;

flex-shrink: 0;

}

.radio-group-row label span{

display: inline-block;

flex: 1;

word-break: break-word;

}

.info-text p{

margin: 0 0 12px 0;

line-height: 1.6;

}

.info-text a{

text-decoration: underline;

}

.info-text a:hover{

text-decoration: none;

}

input[type="checkbox"]{

flex-shrink: 0;

}

.radio-group-row{

display: flex;

flex-direction: column;

gap: 5px;

}

.radio-inline{

display: flex;

gap:20px;

align-items: center;

margin-top: 0px;

}

.radio-inline label{

display: flex;

align-items: center;

gap: 5px;

}

 
/* Responsive tweaks */

@media (max-width: 980px) {

  .main-container {max-width: 99vw; margin: 10px 1vw;}

  form {padding: 12px 2vw 22px 2vw;}

  .banner-text {font-size: 2rem; padding: 7px 7vw;}

  .form-section h2 {padding-left: 15px;}
.sub-section-title {padding-left: 15px;}

  .form-group {

    flex: 1 1 240px;

    padding-left: 6px;

    padding-right: 6px;

  }

  .form-row {

    gap: 12px;

    padding-left: 22px;

    padding-right: 22px;

  }

.radio-group-row label{

flex: 1 1 100%;

}
 
}

@media (max-width: 600px) {
 .logo {
    height: 45px;
  }
.header{
height: 50px;
}
.banner-panel {
    height: 25vh;
    min-height: 120px;
  }
 .banner-text {
    font-size: 1.6rem;
    padding: 15px 4vw;
  }
  html, body {

    overflow-x: hidden;

  }

  .main-container {

    max-width: 100vw;

    margin: 10px 5px;

    padding-left: 0;

    padding-right: 0;

  }

  form {

    padding: 10px 10px 20px 10px;

  }

  .form-row {

    flex-direction: column;

    gap: 12px;

    padding-left: 18px;

    padding-right: 18px;

    margin: 0;

  }

  .form-group {

    flex: 1 1 100%;

    padding-left: 0;

    padding-right: 0;

    margin-bottom: 8px;

  }

  button[type="submit"] {

    margin-left: 10px;

    margin-right: 10px;

  }

  .sub-section-title {

    padding-left: 12px;

  }

  .form-section h2 {

    font-size: 18px;

    padding-left: 12px;

  }

}

@media (max-width: 480px) {
.logo {
   height: 35px;
  }
.header{
height: 40px;
padding-left: 15px;
}
.banner-panel {
    height: 20vh;
    min-height: 100px;
  }
 .banner-text {
    font-size: 1.3rem;
    padding: 12px 3vw;
  }
  body {

    font-size: 14px;

  }

  .main-container {

    margin: 8px 4px;

    border-radius: 12px;

  }

  form {

    padding: 12px 8px 20px 8px;

  }

  .form-section h2 {

    padding-left: 12px;

    font-size: 18px;
    border-left: 4px solid #D64000;

  }

  .sub-section-title {

      padding-left: 12px;

    font-size: 16px;
border-left: 3px solid #D64000;


  }

  .form-row {

    gap: 8px;

    padding-left: 15px;

    padding-right: 15px;

  }

  .form-group {

    padding-left: 4px;

    padding-right: 4px;

  }

  button[type="submit"] {

    padding: 10px 28px;

    font-size: 1rem;

    margin-left: 8px;

    margin-bottom: 10px;

  }

  .banner-text {

    font-size: 0.9rem;

    padding: 8px 3vw;

  }

#success-alert{

width: 90vw;

padding: 24px 20px;

font-size: 12px;

}
 
.checkmark-svg{

width: 64px;

height: 64px;

}

.message{

font-size: 1.05rem;

}

}

.form-row, .form-row-single {

overflow: visible !important;

}

.main-container {

overflow: visible !important;

}

.multi-select-options{

z-index: 9999;

}

input[type="radio"]{

accent-color: #c20000;

}